﻿@using Small.Html.UI;
@using Small.Html.Options;
@{
    ViewBag.Title = "GridList";
    Layout = "~/Views/Shared/ListLayout.cshtml";
}

<h2>GridList</h2>
<link href="~/Scripts/jquery-ui-1.10/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.css" rel="stylesheet" />
<link href="~/Scripts/jquery.jqGrid-4.4.5/css/ui.jqgrid.css" rel="stylesheet" />
@section Scripts
    {
    <script src="~/Scripts/jquery.jqGrid-4.4.5/js/i18n/grid.locale-cn.js"></script>
    <script src="~/Scripts/jquery.jqGrid-4.4.5/js/jquery.jqGrid.src.js"></script>
    <script type="text/javascript">

        $(function () { 


            @Html.JqGrid("list2", ViewBag.JqGridOptions as JqGridOptions);

            function testSerilazer(data)
            {
               
            }

           
            //jQuery("#list2").jqGrid({
            //mtype:'post',
            //url: '/Test/List',
            //datatype: "json",
            //colNames: ['Key', 'ParentID', 'Name', 'Age', 'No'],
            //colModel: [
            //    { name: 'Key', index: 'id', width: 55 },
            //    { name: 'ParentID', index: 'invdate', width: 90, sortable: true },
            //    { name: 'Name', index: 'name asc, invdate', width: 100 },
            //    { name: 'Age', index: 'amount', width: 80, align: "right" },
            //    { name: 'No', index: 'tax', width: 80, align: "right" }
               
            //],
            //rowNum: 10,
            //rowList: [10, 20, 30],
            //pager: '#pager2',
            //sortname: 'Name',
            //viewrecords: true,
               
            //pagerpos: "left",
            //sortorder: "desc",
            //caption: "JSON Example"
            //});

            //jQuery("#list2").jqGrid('setGroupHeaders',
            //    {
            //        useColSpanStyle: false,
            //        groupHeaders: [{ startColumnName: 'Key', numberOfColumns: 3, titleText: '<em>Price</em>' }]
            //    });
        })
        
    </script>
    }


<div>
    <span  onclick="serializerJqGrid('list2')">测试</span>
    <table id="list2"></table>
<div id="pager2"></div>

</div>